<template>
  <a-modal :title="'打印'" :visible="true" width="800px" :footer="null" @cancel="reset">
    <a-button type="primary" style="position: absolute; right: 25px; top: 60px" v-print="'#print'">打印</a-button>
    <div style="margin-top: 20px">
      <div id="print" class="print-landscape">
        <div v-for="(item, i) in list" :key="i" class="background">
          {{ item.name }}
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import Qrcode from '@/views/headquarters-coupon/components/Code.vue'

export default {
  components: {
    Qrcode
  },
  props: {
    selectList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      list: []
    }
  },

  created() {
    const { selectList } = this.$props
    if (selectList.length) {
      this.list = selectList
    }
  },
  methods: {
    reset() {
      this.$emit('closePrint')
    }
  }
}
</script>
<style>
@media print {
  @page print-landscape {
    size: landscape;
  }
}
div.print-landscape {
  page: print-landscape;
}
</style>
<style scoped>
.background {
  font-size: 12px;
  width: 50px;
  padding-top: 20px;
  color: black;
  margin: auto;
  text-align: center;
}

@media print {
  @page {
    /*A4: 210mm × 297mm，size: 794px × 1123px，0边距*/
    /*171.9mm × 258.9mm，size：6412px × 978px，19.05mm边距（ie浏览器默认打印边距） */
    /* margin: 0;
    size:  26mm 16mm; */
  }
  .background {
    border: none !important;
  }
  .background:not(:last-child) {
    page-break-after: always;
  }
}
</style>
